// src/context/ThemeContext.tsx
import React, { createContext, useState, useContext, ReactNode } from 'react';
import { Appearance } from 'react-native';
import { colors } from '../Theme';
type Theme = 'light' | 'dark';

interface ThemeContextProps {
  theme?: Theme;
  toggleTheme: () => void;
  themeColors?: typeof colors.light;
}

const ThemeContext = createContext<ThemeContextProps | undefined>(undefined);

export const ThemeProvider = ({ children }: { children: ReactNode }) => {
  const { getColorScheme, setColorScheme } = Appearance
  const [theme, setTheme] = useState<Theme>(getColorScheme() || 'light');

  const toggleTheme = () => {
    setTheme((prevTheme) => {
      return prevTheme === 'light' ? 'dark' : 'light';
    })
    setColorScheme(getColorScheme() === 'dark' ? 'light' : 'dark');
  }

  return (
    <ThemeContext.Provider value={{ toggleTheme, theme }}>
      {children}
    </ThemeContext.Provider>
  );
};

export const useTheme = (): ThemeContextProps => {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
};